<template>

  <div>
    <div class="solutions background-cover">
      <h1>CONNECT FREELY WITH NDI HX3</h1>
      <div>
        <span>Enable OBSBOT Tail Air to transmit high-quality videos over ethernet.</span>
      </div>
      <el-button class="ndi-button"><a href="/accessories/products/ndi-license-key">Buy NDI License Key Now</a></el-button>
    </div>

    <div class="solutions-content">
      <div class="NDI">
        <h1 style="font-size: 25px;">What is NDI?</h1>
      </div>
      <span style="font-size: 15px;">NDI (Network Device Interface) is an open protocol designed for bidirectional video transmission over an Ethernet network in real-time.<br> NDI-enabled products are widely used in live production system, making video creation and sharing much easier.</span>
      <div style="margin-top: 100px;">
        <h1 style="font-size: 42px; margin-bottom: 80px; font-weight: bold;">Optimal Transmission</h1>
        <ul v-if="OptimalTransmission">
          <li v-for="(item, index) in (OptimalTransmission as any)" :key="index">
            <div>
              <h3>{{ item.title }}</h3>
              <span>{{ item.context }}</span>
              <div class="optimal-img">
                <img :src="item.src" alt="">
              </div>
            </div>
          </li>
        </ul>
      </div>


      <div class="simple-carousel">
        <p style="font-size: 40px; font-weight: bold; margin-bottom: 50px;">A Simple, Powerful, Affordable Solution for All</p>
        <el-carousel :interval="4000" type="card" :autoplay="true" height="500px" @change="handleCarouselChange">
          <el-carousel-item v-for="(item, index) in (simple as any)" :key="index">
            <img :src="item.image" alt="carousel image" style="height: 100%;">
          </el-carousel-item>
        </el-carousel>
        <div class="simple-content">
          <p>
            {{ simple[currentIndex].description }}
          </p>
        </div>
      </div>
    </div>



    <div class="faq">
      <p style="text-align: center; font-size: 40px; font-weight: bold; margin-bottom: 40px;">F A Q</p>
      <div class="demo-collapse">
        <el-collapse accordion v-for="(item, index) in faq" :key="index">
          <el-collapse-item :name="item.id">
            <template #title>
              <span class="custom-title">{{ item.title }}</span>
            </template>
            <div>
              <span style="font-size: 15px;">{{ item.description }}</span>
            </div>
          </el-collapse-item>
        </el-collapse>
      </div>
    </div>



    <div class="learn">
      <p style="font-size: 30px; font-weight: bold;">
        Check our guidances to use<br>
         NDI with OBSBOT Tail Air.
      </p>
      <el-button class="ndi-button" style="width: 200px; margin-bottom: 50px;" ><a href="/explore/" style="color: black;">Learn now</a></el-button><br>
      <span style="color: gray;">NDI is a registered trademark of NewTek, Inc.</span>
    </div>

    <Footer/>

  </div>



</template>


<script lang="ts">
import { reactive, ref, toRefs } from 'vue';
import { getTransmission } from '@/api/api';
import { ElLoading } from 'element-plus'
import { ElMessage } from 'element-plus'


export default {
  setup(){

    const data = reactive({
      OptimalTransmission: ref(),
      simple: ref([
        {
          image: "https://staticmedia.remo-ai.com/image/default/F5C0EF12A1104AEBBB158ABEF1A83B85-6-2.jpg",
          description: "NDI empowers your church events to reach and engage audiences from anywhere.You have the flexibility to place OBSBOT Tail Air wherever needed, capturing close-up views from long distances, all while maintaining your sacred space's aesthetic appeal - Our Multicam system built with NDI minimizes cabling requirements, while Tail Air has the tiniest size."
        },
        {
          image: "https://staticmedia.remo-ai.com/image/default/AB781C6B793A4DE0B07DDEEC68E46029-6-2.jpg",
          description: "No more complex cablings or broadcasting trucks to bring all the gears together. With NDI's real-time bidirectional transmission, your production team can blend NDI video sources from across the globe simultaneously."
        },
        {
          image: "https://staticmedia.remo-ai.com/image/default/4C15807080734D28A05213BE5F08A08C-6-2.jpg",
          description: "Seamlessly supported by popular conferencing apps like Zoom™ or Microsoft Teams™, adding NDI video sources to your virtual meeting room is effortless. Whether it's a meeting, webinar, or product launch, you can now engage your participants more effectively with high-quality visual content."
        },
        {
          image: "https://staticmedia.remo-ai.com/image/default/4C15807080734D28A05213BE5F08A08C-6-2.jpg",
          description: "Teachers and IT team can easily discover and manage multiple video sources recorded by NDI-enabled devices to create an enriched learning environment via the network. Meanwhile, students from anywhere effortlessly access these resources through the same network."
        },
      ]),

      faq: ref([
        {
          id: '1',
          title: "Can NDI transmit other data besides video and audio?",
          description: "Yes, NDI is versatile and can transmit metadata, control signals, and other ancillary data along with video and audio streams."
        },
        {
          id: '2',
          title: "How do I choose between wired or wireless NDI connection?",
          description: "You have the flexibility to choose either wired or wireless based on your needs. However, for enhanced stability in less-than-ideal network conditions, we recommend using a wired NDI connection, which requires additional accessories, including Ethernet cable and USB-C to Ethernet adapter."
        },
        {
          id: '3',
          title: "Can NDI and HDMI be used simultaneously with OBSBOT Tail Air?",
          description: "OBSBOT Tail Air doesn't support simultaneous output of NDI and HDMI video signals."
        },
        {
          id: '4',
          title: "Can an NDI license key be used on multiple Tail Air devices?",
          description: "No. A single NDI license key is tied to one Tail Air device."
        },
        {
          id: '5',
          title: "What NDI formats does OBSBOT Tail Air support?",
          description: "OBSBOT Tail Air supports both NDI | HX3® and NDI | HX2®."
        }
      ]),
      currentIndex: ref(0),
      activeName: ref('1')
    })


    getTransmission('').then((res: any) => {
      data.OptimalTransmission = res._rawValue.title
      
    }).catch((err: any) => {
      console.log(err, '请求失败')
    })


    
    const handleCarouselChange = (index: any) => {
      data.currentIndex = index
    }




    onMounted(() => {
      handleCarouselChange

    })

    return{
      ...toRefs(data),
      handleCarouselChange,

    }
  }
}
</script>



<style scoped>

.solutions {
  display: flex;
  /* 垂直排列  */
  flex-direction: column; 
  align-items: center;
  justify-content: center;
  line-height: 100px;
  background-image: url(https://staticmedia.remo-ai.com/image/default/29814E36F2A04F199A63D7B899DB7B30-6-2.jpg);
  height: 900px; 
}

.background-cover {
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: cover;
}

.fixed-header {
  background-color: black !important;
}

.solutions h1 {
  font-size: 50px;
  color: #ffffff;
  font-weight: bold;
}

.solutions span {
  background-color: #e60033;
  font-size: 17px;
  padding: 5px 0;
  border-radius: 4px;
}

.ndi-button {
  background-color: none;
  height: 50px;
  width: 300px;
  background: none;
  border-radius: 30px;
  color: #ffffff;
  margin-top: 40px;
}

.ndi-button:hover {
  background-color: #e60033;
}


.solutions-content {
  display: flex;
  position: relative;
  flex-direction: column; 
  text-align: center;
  justify-content: center;
  margin-top: 150px;
  line-height: 50px;
}

.solutions-content ul {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

.solutions-content ul li {
  height: 400px;
  width: 400px;
  background: white;
  line-height: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 阴影效果，可以根据需要进行调整 */
  line-height: 30px;
  padding: 20px 20px;
  position: relative;
}

.solutions-content ul li h3 {
  font-weight: bold;
  font-size: 20px;
  margin-top: 30px;
  margin-bottom: 30px;
}

.solutions-content ul li span {
  font-size: 15px;
  

}

.optimal-img {
  height: 80px;
  width: 80px;
  position: absolute;
  bottom: 32px;
  left: 32px;
}


.simple-carousel {
  margin-top: 200px;
}

.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}


.simple-content {
  height: auto;
  width: 900px;
  margin-left: 480px;
}
.simple-content p {
  line-height: 30px;
  font-size: 16px;
  margin-top: 40px;
}


.faq {
  display: flex;
  flex-direction: column;
  height: auto;
  width: 1000px;
  justify-content: center;
  margin-left: 430px;
  margin-top: 80px;
  padding: 80px  0;
}


.custom-title {
  font-size: 16px; /* 设置标题字体大小为 18 像素 */
  font-weight: bold;
}

.learn {
  text-align: center;
  margin-bottom: 100px;
}

</style>